<!-- 当前导航 -->
<div class="current-position">
  <!-- 面包屑 -->
  <nz-breadcrumb class="breadcrumb">
    <nz-breadcrumb-item>首页</nz-breadcrumb-item>
    <nz-breadcrumb-item>app管理</nz-breadcrumb-item>
    <nz-breadcrumb-item>{{_app.AppName}}</nz-breadcrumb-item>
    <nz-breadcrumb-item>配置列表</nz-breadcrumb-item>
  </nz-breadcrumb>
  <h1 class="current-position-title">配置列表</h1>
</div>
<!-- 主体内容 -->
<div class="main-content">
  <div style="margin-bottom: 20px;">
    <!-- <button nz-button [nzType]="'primary'" [routerLink]="['../../key', -1]">
      <span>Create Configure</span>
    </button> -->
    <button nz-button [nzType]="'primary'" (click)="_isVisible_create=true; _configNameForm.reset();">
      <span>Create Configure</span>
    </button>
  </div>

  <!-- [nzBordered]="true" 边框 -->
  <nz-table #nzTable 
    [nzDataSource]="_appConfigLs" 
    [nzIsPagination]="'false'" 
    [nzLoading]="_isDataLoading"
  >
      <thead nz-thead>
        <tr>
          <th nz-th style="width: 50px;"></th>
          <th nz-th style="width: 200px;">
            <div class="flex-box">
              <span style="white-space: nowrap; margin-right: 10px; margin-top: 3px;">Key</span>
              <nz-input [nzPlaceHolder]="'Search key'" [(ngModel)]="_searchKey" (ngModelChange)="_search(_searchKey)"></nz-input>
            </div>
          </th>
          <th nz-th>
            <span>Value</span>
          </th>
          <th nz-th style="width: 200px;">
            <span>Action</span>
          </th>
        </tr>
      </thead>
    <tbody nz-tbody>
      <ng-template ngFor let-data [ngForOf]="nzTable.data">
        <tr nz-tbody-tr>
          <td class="expand-icon">
            <nz-row-expand-icon [(nzExpand)]="data.expand"></nz-row-expand-icon>
          </td>
          <td nz-td>{{data?.Key}}</td>
          <!-- <td nz-td>{{data.Value}}</td> -->
          <td nz-td>
            <!-- <json-editor class="jsoneditor" [(ngModel)]="data.Value" jsonModal #valueJsE="json-modal" [config]="{
              sortObjectKeys: false,
              mode: 'view',
              name: data.Key+'_config'
            }">
          </json-editor> -->
            <!-- <json-read-only [jsonConfig]="{
            data: data.Value,
            mode: 'view'
          }"></json-read-only> -->
            <!-- <a href="javascript:;" class="expand-a" (click)="data.expand = !data.expand">{{data.intercept}}</a> -->
            <div class="value">
              <a href="javascript:;" class="expand-a" (click)="data.expand = !data.expand">{{data.intercept}}</a>
            </div>
          </td>
          <td nz-td>
            <span>
              <a href="javascript:;" (click)="_delete(data.Key)">Delete</a>
              <span nz-table-divider></span>
              <!-- <a href="javascript:;" [routerLink]="['../../key', data.Key]">Update</a> -->
              <a href="javascript:;" (click)="update(data.Value, data.Key)">Update</a>
            </span>
          </td>
        </tr>
        <tr nz-tbody-tr *ngIf="data.expand">
          <td nz-td colspan="4">
            <json-read-only [jsonConfig]="{
                data: data.Value,
                mode: 'view'
              }">
            </json-read-only>
          </td>
        </tr>
      </ng-template>
    </tbody>
  </nz-table>
</div>

<!-- 模态框 新建-->
<nz-modal 
  [nzWidth]="'60%'"
  [nzVisible]="_isVisible_create" 
  [nzTitle]="modalTitle_c" 
  [nzContent]="modalContent_c" 
  [nzFooter]="modalFooter_c"
  (nzOnCancel)="_handleCancel_c($event)"
>
  <ng-template #modalTitle_c>
    Create Configuration
  </ng-template>
  <ng-template #modalContent_c>
    <form nz-form [formGroup]="_configNameForm">
      <div nz-form-item nz-row>
        <div nz-form-control nz-col [nzSm]="24" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" [nzPlaceHolder]="'please enter key'" formControlName="key" [nzId]="'key'"></nz-input>
          <div nz-form-explain *ngIf="_configNameForm.controls['key'].dirty&&_configNameForm.controls['key'].hasError('required')">please enter key!</div>
        </div>
      </div>
    </form>
    <json-editor class="jsoneditor" [(ngModel)]="_newCofig" jsonModal #createModal="json-modal" [config]="{
        sortObjectKeys: false,
        mode: 'code'
      }">
    </json-editor>
  </ng-template>
  <ng-template #modalFooter_c>
    <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="_handleCancel_c($event)">cancle</button>
    <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="_handleOk_c($event)" [nzLoading]="_isConfirmLoading">create</button>
  </ng-template>
</nz-modal>


<!-- 模态框 编辑-->
<nz-modal 
  [nzWidth]="'60%'"
  [nzVisible]="_isVisible_update" 
  [nzTitle]="modalTitle_u" 
  [nzContent]="modalContent_u" 
  [nzFooter]="modalFooter_u"
  (nzOnCancel)="_handleCancel_u($event)"
>
  <ng-template #modalTitle_u>
    Update Configuration
  </ng-template>
  <ng-template #modalContent_u>
    <json-editor class="jsoneditor" [(ngModel)]="_editorCofig" jsonModal #updateModal="json-modal" [config]="{ sortObjectKeys: false, mode: 'code' }">
    </json-editor>
  </ng-template>
  <ng-template #modalFooter_u>
    <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="_handleCancel_u($event)">cancle</button>
    <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="_handleOk_u($event)" [nzLoading]="_isConfirmLoading">update</button>
  </ng-template>
</nz-modal>